<template>
    <div class="container">
        <div class="form-box">
            <el-form ref="formRef" :model="form" label-width="80px">
                <el-form-item label="寄件信息">
                    <template></template>
                    <el-card>
                        <el-descriptions
                                class="margin-top"
                                :column="2"
                                border>
                            <template #title>
                                <el-button type="primary" @click="handleSelectedAddressBook(0)">选择</el-button>
                            </template>
                            <el-descriptions-item :width="160">
                                <template #label>
                                    <div class="cell-item">
                                        姓名
                                    </div>
                                </template>
                                {{senderMsg.name}}
                            </el-descriptions-item>
                            <el-descriptions-item :width="160">
                                <template #label>
                                    <div class="cell-item">
                                        联系电话
                                    </div>
                                </template>
                                {{senderMsg.phone}}
                            </el-descriptions-item>
                            <el-descriptions-item :span="2">
                                <template #label>
                                    <div class="cell-item">
                                        地址
                                    </div>
                                </template>
                                {{senderMsg.province}}{{senderMsg.city}}{{senderMsg.town}}{{senderMsg.detailAddress}}
                            </el-descriptions-item>
                        </el-descriptions>
                    </el-card>
                </el-form-item>
                <el-form-item label="收件信息">
                    <el-card>
                        <el-descriptions
                                class="margin-top"
                                :column="2"
                                border>
                            <template #title>
                                <el-button type="primary" @click="handleSelectedAddressBook(1)">选择</el-button>
                            </template>
                            <el-descriptions-item :width="160">
                                <template #label>
                                    <div class="cell-item">
                                        姓名
                                    </div>
                                </template>
                                {{receiverMsg.name}}
                            </el-descriptions-item>
                            <el-descriptions-item :width="160">
                                <template #label>
                                    <div class="cell-item">
                                        联系电话
                                    </div>
                                </template>
                                {{receiverMsg.phone}}
                            </el-descriptions-item>
                            <el-descriptions-item :span="2">
                                <template #label>
                                    <div class="cell-item">
                                        地址
                                    </div>
                                </template>
                                {{receiverMsg.province}}{{receiverMsg.city}}{{receiverMsg.town}}{{receiverMsg.detailAddress}}
                            </el-descriptions-item>
                        </el-descriptions>
                    </el-card>
                </el-form-item>
                <el-form-item label="快件类型" prop="typeId">
                    <el-select v-model="form.typeId" placeholder="请选择">
                        <el-option v-for="item in typeOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="支付方式" prop="payment">
                    <el-radio-group v-model="form.payment">
                        <el-radio :label="0" :model-value="0">寄付</el-radio>
                        <el-radio :label="1" :model-value="1">到付</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="备注信息" prop="remark">
                    <el-input type="textarea" rows="3" v-model="form.remark"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit()" :disabled="buttonDisabled">确认寄件</el-button>
                </el-form-item>
            </el-form>
        </div>

        <!--地址簿选择-->
        <AddressBookSelector ref="addressBookDialogRef" @selectedAddressBook="selectedAddressBook"></AddressBookSelector>

    </div>
</template>

<script setup lang="ts" name="sendExpress">
    import {reactive, ref} from 'vue';
    import {ElMessage} from 'element-plus';
    import type {FormInstance} from 'element-plus';
    import { addExpress, getTypeOptions } from '../api/index';
    import AddressBookSelector from '../components/AddressBookSelector.vue'

    const typeOptions = ref([]);
    const addressDialog = ref(false);
    const buttonDisabled = ref(false);
    const addressType = ref(0);
    const selectedAddress = ref();
    const addressData = ref([
        {
            name: '张三',
            phone: "13428330987",
            province: "福建省",
            city: "福州市",
            town: "闽侯县",
            detailAddress: "福州大学（旗山校区）"
        },
        {
            name: '李四',
            phone: "17828330987",
            province: "福建省",
            city: "福州市",
            town: "闽侯县",
            detailAddress: "福州师范大学"
        }
    ]);
    const form = reactive({
        payment: 0,
        remark: '',
        typeId: '',
    });
    const senderMsg = reactive({
        name: '',
        phone: "",
        province: "",
        city: "",
        town: "",
        detailAddress: ""
    });
    const receiverMsg = reactive({
        name: '',
        phone: "",
        province: "",
        city: "",
        town: "",
        detailAddress: ""
    });
    const query = reactive({
        pageNum: 1,
        pageSize: 5,
        page: 1,
        total: 0
    });
    // 提交
    const onSubmit = async (formEl: FormInstance | undefined) => {
        try {
            buttonDisabled.value = true;
            if (!senderMsg.name) {
                ElMessage.warning("请选择寄件信息");
                return;
            }
            if (!receiverMsg.name) {
                ElMessage.warning("请选择收件信息");
                return;
            }
            if (!form.typeId) {
                ElMessage.warning("请选择快件类型");
                return;
            }

            if (senderMsg.province === receiverMsg.province && senderMsg.city === receiverMsg.city
                && senderMsg.town === receiverMsg.town && senderMsg.detailAddress === receiverMsg.detailAddress) {
                ElMessage.warning("寄件地址与收件地址相同，请确认信息");
                return ;
            }

            const param = {
                payment: form.payment,
                typeId: form.typeId,
                remark: form.remark,
                senderName: senderMsg.name,
                senderPhone: senderMsg.phone,
                senderProvince: senderMsg.province,
                senderCity: senderMsg.city,
                senderTown: senderMsg.town,
                senderDetail: senderMsg.detailAddress,
                receiverName: receiverMsg.name,
                receiverPhone: receiverMsg.phone,
                receiverProvince: receiverMsg.province,
                receiverCity: receiverMsg.city,
                receiverTown: receiverMsg.town,
                receiverDetail: receiverMsg.detailAddress
            };

            const res = await addExpress(param);
            if (res) {
                ElMessage.success("提交成功，请等待快递员上门揽件");
                clearData();
            }
        } finally {
            buttonDisabled.value = false;
        }
    };
    // 重置
    const onReset = (formEl: FormInstance | undefined) => {
        if (!formEl) return;
        formEl.resetFields();
    };

    // 获取后端数据 (地址簿数据、快件类型数据)
    const getData = async () => {
        const optionsResult = await getTypeOptions();
        if (optionsResult) {
            typeOptions.value = optionsResult.data;
        }
    };
    // 初始化数据
    getData();

    // 查询操作
    const handleSearch = () => {
        query.pageNum = 1;
        getData();
    };
    // 分页导航
    const handlePageChange = (val: number) => {
        query.pageNum = val;
        getData();
    };

    const addressBookDialogRef = ref();
    const addressBookType = ref();
    const handleSelectedAddressBook = (param: any) => {
        if (param == 0) {
            addressBookDialogRef.value.changeShow(true);
        } else {
            addressBookDialogRef.value.changeShow(true);
        }
        addressBookType.value = param;
    };

    const selectedAddressBook = (param: any) => {
        console.log("selectedAddressBook", param);
        if (addressBookType.value == 0) {
            Object.keys(senderMsg).map((key: string) => senderMsg[key] = param[key]);
        } else {
            Object.keys(receiverMsg).map((key: string) => receiverMsg[key] = param[key]);
        }
    };

    // 清除表单数据
    const clearData = () => {
        senderMsg.province = '';
        senderMsg.city = '';
        senderMsg.town = '';
        senderMsg.detailAddress = '';
        senderMsg.phone = '';
        senderMsg.name = '';
        receiverMsg.province = '';
        receiverMsg.city = '';
        receiverMsg.town = '';
        receiverMsg.detailAddress = '';
        receiverMsg.phone = '';
        receiverMsg.name = '';
        form.remark = '';
        form.typeId = '';
        form.payment = 0;
    };

</script>
<style>
    ::v-deep(.el-table__header-wrapper .el-checkbox) {
        display:none
    }
</style>